<template>
  <div class="ranking-box wh-100">
    <div class="rank-top">
      <h2 class="titletext">商品排行</h2>
      <div class="ranking-btn">
        <el-radio v-model="radio" label="1">按成交排序</el-radio>
        <el-radio v-model="radio" label="2">按访问排序</el-radio>
      </div>
    </div>

    <div class="productlistbox">
      <div class="product-cont">
        <el-table
          ref="singleTable"
          :data="showTableData"
          highlight-current-row
          style="width: 100%"
          height="100%"
        >
          <el-table-column
            type="index"
            :index="typeIndex"
            label="排名"
            width="80"
          >
          </el-table-column>
          <el-table-column property="id" label="商品ID"> </el-table-column>
          <el-table-column property="proname" label="商品名称">
          </el-table-column>
          <el-table-column property="sales" label="成交额"> </el-table-column>
          <el-table-column property="visited" label="访问量"> </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="footerpage center">
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage1"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { ranks } from "@/mockApi/homepage/MarkRanking";
import _ from "lodash";
export default {
  name: "RankingComp",
  components: {},
  computed: {
    showTableData() {
      const arr = this.tableData;
      if (this.radio === "1") {
        const arr2 = arr.map((item) => {
          const a = item.sales;
          const a1 = a.replace("￥", "");
          item.sales = a1;
          return item;
        });
        console.log(arr2);

        arr2.sort((a, b) => {
          return b.sales - a.sales;
        });
        return arr2.slice(
          (this.currentPage1 - 1) * this.pageSize,
          this.currentPage1 * this.pageSize
        );
      } else {
        const arr3 = _.sortBy(arr, function (item) {
          return -item.visited;
        });

        return arr3.slice(
          (this.currentPage1 - 1) * this.pageSize,
          this.currentPage1 * this.pageSize
        );
      }
    },
  },
  data() {
    return {
      tableData: [], // 列表数据
      currentPage1: 1,
      pageSize: 10,
      total: 0,
      radio: "1", // 单选按钮
    };
  },

  methods: {
    handleCurrentChange(val) {
      this.currentPage1 = val;
    },
    // 排名序号增长
    typeIndex(index) {
      return index + 1 + (this.currentPage1 - 1) * 10;
    },
  },
  mounted() {
    // 排行列表数据请求
    ranks.getAll().then((res) => {
      // console.log(res);
      this.tableData = res;
      // 总条数设置
      this.total = this.tableData.length;
      // this.handleCurrentChange(1);
    });
  },
};
</script>

<style scoped lang="scss">
.ranking-box {
  display: flex;
  flex-direction: column;
  .rank-top {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    .titletext {
      font-size: 14px;
      font-weight: normal;
      padding: 20px;
    }
    .ranking-btn {
      padding: 20px 40px 20px 20px;
    }
  }
  .productlistbox {
    margin: 0px 20px;
    box-sizing: border-box;
    flex: 1;
    overflow: hidden;
    position: relative;
    .product-cont {
      position: absolute;
      width: 100%;
      height: 100%;
    }
  }
  .footerpage {
    height: 60px;
  }
}
::-webkit-scrollbar {
  display: none;
}
:deep(.el-table__body-wrapper::-webkit-scrollbar) {
  /*width: 0;宽度为0隐藏*/
  width: 0px;
}
</style>
